<template>
  <el-dialog v-model="dialogVisible">
    <el-table :data="tableData" border>
      <el-table-column label="sku名称" prop="skuName" show-overflow-tooltip />
      <el-table-column label="sku价格" prop="price" />
      <el-table-column label="sku重量" prop="weight" />
      <el-table-column label="sku图片">
        <template #="{ row }">
          <img
            :src="row.skuDefaultImg"
            alt="sku图片"
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getSkuInfo } from '@/api/product/spu'
let dialogVisible = ref<boolean>(false)
const tableData = ref<any[]>([])
const getTableData = async (spuId: number | string) => {
  await getSkuInfo(spuId).then((res) => {
    if (res.code === 200) tableData.value = res.data
  })
}

defineExpose({ dialogVisible, getTableData })
</script>

<style lang="scss" scoped></style>
